<template>
  <view :class="['vh100', { dark: theme == 'dark' }]">
    <view class="pt5 plr20">
      <view
        class="flex alcenter mb5"
        @click="showP = true"
      >
        <view class="bd_input ptb10 plr10 tc flex1 radius4">
          <view class="flex between">
            <text>{{ $t('bico.W415') }}</text>
            <text>{{ symbol }}</text></view
          >
        </view>

        <u-picker
          mode="selector"
          :default-selector="[0]"
          :confirm-text="confirmText"
          :cancel-text="cancelText"
          v-model="showP"
          :range="coinArr"
          @confirm="getSymbol"
          range-key="symbols"
        >
        </u-picker>
      </view>

      <view
        class="flex alcenter mb5"
        v-if="symbol == 'USDT'"
        @click="showP2 = true"
      >
        <view class="bd_input ptb10 plr10 tc flex1 radius4">
          <view class="flex between">
            <text>{{ $t('bico.W109') }}</text>
            <text>{{ chainName }}</text></view
          >
        </view>
        <u-picker
          v-model="showP2"
          mode="selector"
          :confirm-text="confirmText"
          :cancel-text="cancelText"
          :range="tabBars"
          range-key="name"
          @confirm="tapTab"
        >
        </u-picker>
      </view>

      <view class="flex alcenter mb5">
        <view class="bd_input ptb10 plr10 tc flex1 radius4">
          <view class="flex between">
            <!-- {{$t('bico.W111')}}<input type="digit" v-model="number" :placeholder="'最低充值'+checkNum+symbol" class="flex1  between input-uni"  /> -->
            {{ $t('bico.W111')
            }}<input
              type="text"
              v-model="number"
              :placeholder="'' + checkNum + symbol"
              class="flex1 between input-uni"
            />
          </view>
        </view>
      </view>

      <view class="mt10 bgPart radius4 ptb5 plr15 tc">
        <image
          :src="img"
          mode="widthFix"
          :style="{ width: size + 'px', height: size + 'px' }"
          class="mauto"
        ></image>
        <view class="mt20 ft12 tc">{{ $t('assets.addr_charge') }}</view>
        <view class="tc ft12 gray_e mt5">{{ address }}</view>
        <view
          class="mt10 wt80 h30 lh30 radius4 mauto bgBlue white"
          @tap="fuzhi_invite"
          >{{ $t('assets.coypaddr') }}</view
        >
      </view>
      <view class="mt10 bgPart radius4 ptb5 plr15 tc">
        <view
          class=""
          @tap="uploadImg(2)"
        >
          <view
            class=""
            v-if="!hasUp2"
          >
            <image
              :src="img1"
              class="wt40 h40"
            ></image>
            <view class="mt10 tc">{{ $t('bico.W108') }}</view>
          </view>
          <image
            :src="img2"
            class="w95"
            mode="widthFix"
            v-else
            style="max-height: 100px"
          ></image>
        </view>
        <view
          class="mt10 wt80 h30 lh30 radius4 mauto bgBlue white"
          @tap="submitFun"
          >{{ $t('home.recharge') }}</view
        >
      </view>
      <view class="mt10">
        <view class="mb5 colorr">
          <text class="t_tile">{{ $t('assets.c_title') }}:</text>
        </view>
        <view class="mb5 colorr">
          <text class="ft12">*{{ $t('assets.c_tip1') }}</text>
          <text class="ft12"> {{ symbolName }} </text>
          <text class="ft12"> {{ $t('assets.c_tip0') }},</text>
          <text class="ft12"> {{ $t('assets.c_tip2') }}</text>
        </view>
        <view class="ft12 colorr">*{{ $t('assets.c_tip4') }}</view>
        <view class="mb5 ft12 colorr">*{{ $t('assets.c_tip7') }}</view>
        <view class="mb5 colorr">
          <text class="t_tile">{{ $t('assets.cz_title') }}:</text>
        </view>
        <view class="mb5">
          <u-collapse>
            <u-collapse-item
              :title="item.title"
              v-for="(item, index) in list"
              :key="index"
            >
              <u-parse :html="item.content"> </u-parse>
            </u-collapse-item>
          </u-collapse>
        </view>

        <!-- <view class="mb5">
					<text class="ft12">{{symbol || '--'}}</text>
					<text class="ft12">{{$t('assets.c_tip3')}}。</text>
				</view>
				<view class="ft12">{{$t('assets.c_tip4')}}。</view>
				<view class="mb5">
					<text class="ft12">{{$t('assets.c_tip5')}}：</text>
					<text class="mainnum ft12">{{coinInfo.min_number || '--'}}</text> <text class="ft12">{{symbol || '--'}}</text>,
				</view>
				<view class="mb5 ft12">{{$t('assets.c_tip6')}}。</view>
				<view class="mb5 ft12">{{$t('assets.c_tip7')}}。</view>
				<view class="mb5 ft12">{{$t('assets.c_tip8')}}。</view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import QR from '@/common/qrcode.js';
import {
  commonProblem,
  commonAllCoin,
  platformAddress,
  uploadImg,
  recharge,
  getWithdrawMinNum
} from '../../common/apiString.js';
import { domain } from '@/common/domain.js';
export default {
  data() {
    return {
      list: [],
      checkNum: 100,
      showP: false,
      confirmText: this.$t('login.c1'),
      cancelText: this.$t('login.c2'),
      showP2: false,
      // confirmText2:'确2认',
      // cancelText2:'取2消',
      title: '',
      currency: '',
      symbolName: '',
      symbol: '',
      coinInfo: {},

      img: '',
      chainName: '',
      tabBars: [],
      coinArr: [],
      size: 160,
      address: '',
      number: '',
      hasUp2: false,
      img1: '/static/image/addImg.png',
      img2: '',
      name: ''
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  watch: {
    number(newVal, oldVal) {
      var that = this;
      if (Number(newVal) < Number(that.checkNum)) {
        that.$utils.showLayer(this.$t('bico.W803') + that.checkNum);
        return;
      }
    }
  },
  onShow() {
    this.getHtml();
  },
  onLoad(e) {
    this.currency = e.currency;
    this.name = e.name;
    uni.setNavigationBarTitle({
      title: this.$t('bico.W110')
    });
    this.$utils.setTheme(this.theme);
    this.getCoinInfo();
    this.withdrawMinNum();
  },
  onPullDownRefresh() {
    this.getCoinInfo();
    this.withdrawMinNum();
  },
  methods: {
    getHtml() {
      this.$utils.initData(
        {
          url: commonProblem,
          data: {
            type: 'CHARGE',
            size: 100,
            language: uni.getStorageSync('lang')
          },
          type: 'post'
        },
        (res, msg) => {
          //uni.stopPullDownRefresh();
          this.list = res.records;
          this.list.forEach(res => {
            res.showFlag = false;
          });
        }
      );
    },
    withdrawMinNum() {
      this.$utils.initDataToken({ url: getWithdrawMinNum, type: 'POST' }, res => {
        this.checkNum = res;
      });
    },
    uploadImg(i) {
      var that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: domain + uploadImg, //仅为示例，非真实的接口地址
            // #ifdef APP-PLUS
            url: domain + uploadImg,
            // #endif
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              user: 'test'
            },
            success: uploadFileRes => {
              console.log(typeof uploadFileRes.data);
              var data = JSON.parse(uploadFileRes.data);
              console.log(data);
              if (data.code == 200) {
                var img = 'img' + i;
                var hsup = 'hasUp' + i;
                console.log(i, img);
                that[img] = 'http://206.238.114.90' + data.data.src;
                that[hsup] = true;
              }
            }
          });
        }
      });
    },
    addressFun() {
      var that = this;
      var symbol = this.symbol;
      this.symbolName = symbol;
      if (this.symbol == 'USDT') {
        if (this.chainName == '') {
          //that.$t('assets.copy_err')
          that.$utils.showLayer(this.$t('bico.W109'));
          return;
        }
        symbol = symbol + '-' + this.chainName;
      }

      this.symbolName = symbol;
      var dto = { symbol: symbol };

      this.$utils.initDataToken({ url: platformAddress, data: dto, type: 'get' }, res => {
        uni.stopPullDownRefresh();
        this.address = res.address;
        this.creatQrcode();
      });
    },
    tapTab(e) {
      //点击tab-bar
      if (this.chainName === this.tabBars[e[0]].name) {
        return false;
      } else {
        this.chainName = this.tabBars[e[0]].name;
        this.addressFun();
      }
    },
    getCoinInfo() {
      this.$utils.initDataToken(
        { url: commonAllCoin, data: { type: 'CHANGER' }, type: 'POST' },
        res => {
          uni.stopPullDownRefresh();
          this.coinArr = res;
		  this.tabBars = res;
          this.symbol = this.coinArr[0].symbols;

          this.addressFun();
          //this.getUserInfo();
        }
      );
    },
    submitFun(form) {
      var that = this;
      if (that.number <= 0) {
        that.$utils.showLayer(that.$t('assets.p_num_tip'));
        return;
      }
      if (Number(that.number) < Number(that.checkNum)) {
        that.$utils.showLayer(this.$t('bico.W803') + that.checkNum);
        return;
      }
      if (!that.hasUp2) {
        that.$utils.showLayer(that.$t('assets.rechargeImage'));
        return;
      }
      var symbol = that.symbol;
      if (symbol == 'USDT') {
        if (that.chainName == '') {
          //that.$t('assets.copy_err')
          that.$utils.showLayer(this.$t('bico.W109'));
          return;
        }
        symbol = symbol + '-' + that.chainName;
      }
      var dto = {
        type: symbol,
        price: that.number,
        address: that.address,
        remark: that.img2
      };
      this.$utils.initDataToken({ url: recharge, data: dto, type: 'get' }, res => {
        //that.$utils.showLayer(that.$t('assets.charge_success'))
        this.refreshPage();
        that.$utils.showLayer(that.$t('assets.charge_success'));
        //刷新页面
        //this.getUserInfo();
      });
    },
    refreshPage() {
      this.getCoinInfo();
      //this.number=0
      this.hasUp2 = !this.hasUp2;
      this.img2 = '';
    },
    getSymbol(e) {
      this.symbol = this.coinArr[e[0]].symbols;

      if (this.symbol == 'USDT') {
        this.chainName = this.tabBars[0].name;
      }
      this.addressFun();
    },
    getUserInfo() {
      // this.$utils.initDataToken({url:'user/info'},res=>{
      // 	this.getAddress(res.id);
      // })
    },
    getAddress(id) {
      this.$utils.getAddressOnline(
        {
          url: 'walletMiddle/GetRechargeAddress',
          data: {
            user_id: id,
            coin_type: this.name,
            contract_address: this.coinInfo.contract_address
          }
        },
        res => {
          uni.stopPullDownRefresh();
          console.log(res);
          if (res.code == 0) {
            this.address = res.data.address;
            this.creatQrcode();
          }
        }
      );
    },
    // 复制
    fuzhi_invite() {
      var that = this;

      uni.setClipboardData({
        data: that.address,
        success: function () {
          that.$utils.showLayer(that.$t('assets.copy_success'));
        },
        fail: function () {
          that.$utils.showLayer(that.$t('assets.copy_err'));
        }
      });
    },
    creatQrcode() {
      if (this.address == '') {
        return false;
      }
      let img = QR.createQrCodeImg(this.address);
      this.img = img;
    }
  }
};
</script>

<style>
.uni-input-input {
  color: #7b7b7b !important;
  padding-left: 10px;
  padding-right: 4px;
  text-align: right;
  font-size: 16px;
}
.mb5 {
  margin-bottom: 5px;
}
.pt5 {
  padding-top: 5px;
}
.ptb5 {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 2px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.colorr {
  color: red;
}
.t_tile {
  line-height: 30px;
  font-size: 18px;
}
</style>
